<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>员工管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图 -->
		<el-card>
			<!-- 表单 -->
			<el-form :inline="true" v-bind:model="formInline" class="demo-form-inline">
				<el-form-item label="姓名">
					<el-input v-model="formInline.LoginName" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="formInline.IsLockout" placeholder="状态">
						<el-option label="全部" value="2"></el-option>
						<el-option label="锁定" value="1"></el-option>
						<el-option label="正常" value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit" round>搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="dialogAddFormVisible='true'" round>添加用户</el-button>
				</el-form-item>
			</el-form>
			<!-- 表格 -->
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="Id" label="编号">
				</el-table-column>
				<el-table-column prop="LoginName" label="登录名">
				</el-table-column>
				<el-table-column prop="PretectEmail" label="邮箱">
				</el-table-column>
				<el-table-column prop="ProtectMtel" label="手机号">
				</el-table-column>
				<el-table-column prop="CreateTime" label="创建时间">
				</el-table-column>
				<el-table-column label="是否锁定">
					<template slot-scope="scope">
						<el-tooltip content="绿:未锁定,红:锁定" placement="top">
						  <el-switch
						    v-model="scope.row.IsLockout"
						    active-color="#ff4949"
							inactive-color="#13ce66"
						    :active-value="1"
						    :inactive-value="0" @change="showswitch(scope.row)">
						  </el-switch>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column prop="LockTime" label="锁定时间">
				</el-table-column>
				<el-table-column label="操作" width="420px">
					<template slot-scope="scope">
						<el-button icon="el-icon-setting" size="mini" type="primary" @click="show(scope.row)">角色</el-button>
						<el-button icon="el-icon-edit" size="mini" type="success" @click="Edit(scope.row)">修改</el-button>
						<el-button icon="el-icon-delete" size="mini" type="warning" @click="Delete(scope.row.Id)">删除</el-button>
						<el-button icon="el-icon-refresh" size="mini" type="danger" @click="reset(scope.row.Id)">重置</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
			 :page-sizes="[10, 15, 20, 25]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper " :total="count">
			</el-pagination>
		</el-card>
		<!-- 添加 -->
		<el-dialog title="添加员工" :visible.sync="dialogAddFormVisible" @close="adddialogclosed">
			<el-form :model="addform" ref="addFormRef">
				<el-form-item label="名称" prop="LoginName" :label-width="formLabelWidth">
					<el-input v-model="addform.LoginName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="Password" :label-width="formLabelWidth">
					<el-input v-model="addform.Password" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="PretectEmail" :label-width="formLabelWidth">
					<el-input v-model="addform.PretectEmail" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="ProtectMtel" :label-width="formLabelWidth">
					<el-input v-model="addform.ProtectMtel" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogAddFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addUser">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 修改 -->
		<el-dialog
		  title="修改用户"
		  :visible.sync="EditdialogVisible"
		  width="50%" @close="Editdialogclosed">
		  <el-form :model="Editform" ref="EditFormRef">
		  	<el-form-item label="名称" prop="LoginName" :label-width="formLabelWidth">
		  		<el-input v-model="Editform.LoginName" auto-complete="off" :disabled="true"></el-input>
		  	</el-form-item>
		  	<el-form-item label="邮箱" prop="PretectEmail" :label-width="formLabelWidth">
		  		<el-input v-model="Editform.PretectEmail" auto-complete="off"></el-input>
		  	</el-form-item>
		  	<el-form-item label="电话" prop="ProtectMtel" :label-width="formLabelWidth">
		  		<el-input v-model="Editform.ProtectMtel" auto-complete="off"></el-input>
		  	</el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="EditdialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="EditDel()">确 定</el-button>
		  </span>
		</el-dialog>
		<!-- 穿梭框 -->
		
		<el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
		<div style="text-align: center">
		<el-transfer style="text-align: left; display: inline-block" v-model="value"
		:titles="['系统所有角色', '当前用户的角色']" @change="handleChange" :data="roleList">
		</el-transfer>
		</div>
		<span slot="footer" class="dialog-footer">
		<el-button @click="dialogVisible = false">取 消</el-button>
		<el-button type="primary" @click="dialogVisible = false;">确 定</el-button>
		</span>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				formInline: {
					LoginName: '',
					IsLockout: '全部',
				},
				tableData: [],
				RolesData:[],
				page: 1,
				limit: 10,
				count: 0,
				dialogAddFormVisible: false,
				EditdialogVisible:false,
				dialogVisible:false,
				formLabelWidth: "120px",
				addform: {},
				Editform:{},
				title:"",
				roleList: [],
				value: [],
				Id: ""
			}
		},
		created() {
			this.getTableList();
		},
		methods: {
			async showswitch(row){
				const {
					data: res
				} = await this.$http.post('api/User/showswitch', row)
				if (res.code == -1) {
					this.$message.error("修改失败！")
				}
				this.$message.success("修改成功！");
				this.getTableList();
			},
			show(row){
				this.dialogVisible=true;
				this.title="您正在设置用户["+row.LoginName+"]的角色";
				this.Id = row.Id;
				this.GetRoleList();
			},
			adddialogclosed(){
				this.$refs.addFormRef.resetFields()
			},
			Editdialogclosed(){
				this.$refs.Editform.resetFields()
			},
			async Delete(Id){
				const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err =>err)
				if(confirmResult!='confirm'){
					this.$message.info("已取消删除")
				}else{
					const {data:res}= await this.$http.post('api/User/Delete',{Id})
					if(res.code==-1){
						this.$message.error("用户删除失败")
					}else if(res.code==-2){
						this.$message.error("该用户不能删除")
					}else{
						this.$message.success("用户删除成功")
						this.getTableList()
					}
				}
			},
			async reset(Id){
				const confirmResult = await this.$confirm('此操作将重置该用户的密码, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err =>err)
				if(confirmResult!='confirm'){
					this.$message.info("已取消重置")
				}else{
					const {data:res}= await this.$http.post('api/User/EditPwd',{Id})
					if(res.code!==0){
						this.$message.error("密码重置失败")
					}else{
						this.$message.success("密码重置为123456")
						this.getTableList()
					}
				}
			},
			EditDel() {
				this.$refs.EditFormRef.validate(async valid => {
					if (!valid) return
					const {
						data: res
					} = await this.$http.post('api/User/Edit', this.Editform)
					if (res.code == -1) {
						this.$message.error("修改失败！")
					}
					this.$message.success("修改成功！");
					this.EditdialogVisible = false;
					this.getTableList();
				})
			},
			Edit:function(row){
				this.Editform=row;
				this.EditdialogVisible=true;
			},
			onSubmit() {
				this.getTableList()
			},
			handleSizeChange(val) {
				this.limit = val;
				this.getTableList()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getTableList()
			},
			async getTableList() {
				const {
					data: res
				} = await this.$http.get('api/User/user', {
					params: {
						page: this.page,
						limit: this.limit,
						LoginName: this.formInline.LoginName,
						IsLockout: this.formInline.IsLockout
					}
				})
				this.count = res.count;
				this.tableData = res.data;
			},
			//添加处理
			addUser() {
				this.$refs.addFormRef.validate(async valid => {
					if (!valid) return
					const {
						data: res
					} = await this.$http.post('api/User/addUsers', this.addform)
					if (res.code == -1) {
						this.$message.error("添加失败！")
					}else if(res.code == -2){
						this.$message.error("用户名不能重复！")
					}else{
						this.$message.success("添加成功！");
						this.dialogAddFormVisible = false;
						this.getTableList();
					}
				})
			},
			handleChange(value, direction, movedKeys) {				console.log(value);				console.log(direction);				console.log(movedKeys);				var str = ""				for (var i = 0; i < movedKeys.length; i++) {					str += movedKeys[i] + ","				}				this.$http.post('api/User/AddT', {					name: str,					str: direction,					id: this.Id				}).then(function(res) {
					this.$message.success("分配成功！");
					this.getTableList()				})			},
			GetRoleList() {				let _this = this;				this.$http.post('api/User/GetRoleList', {						Id: _this.Id					})					.then(function(res) {						const yss = res.data.datas // 已所属						const wss = res.data.data // 未所属						const yssdatal = [];						const wssdata = [];						for (let i = 0; i < wss.length; i++) {							wssdata[i] = {								key: wss[i].Id,								label: wss[i].Name							}						}						for (let j = 0; j < yss.length; j++) {							yssdatal.push(yss[j].Id);							wssdata.push({								key: yss[j].Id,								label: yss[j].Name							})						}						_this.roleList = wssdata;						_this.value = yssdatal;					})			}
		}
	}
</script>
<style lang="less" scoped="scoped">



</style>
